<template>
  <el-container direction="horizontal">
    <Aside></Aside>
    <el-container direction="vertical">
      <Top></Top>
      <el-main>
        <el-header style="text-align:left;">
          <el-button type="primary" size="medium" @click="edit">添加成绩</el-button>
        </el-header>
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            type="index"
            label="编号"
            width="100"
            align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="250">
          </el-table-column>
          <el-table-column
            prop="class"
            label="班级"
            width="350">
          </el-table-column>
          <el-table-column
            prop="mat"
            label="数学"
            width="150">
          </el-table-column>
          <el-table-column
            prop="chn"
            label="语文"
            width="150">
          </el-table-column>
          <el-table-column
            prop="eng"
            label="英语"
            width="150">
          </el-table-column>
          <el-table-column
            prop=""
            label="平均成绩"
            width="150">
            <template v-slot:default="scope">
              {{aver(scope.$index)}}
            </template>
          </el-table-column>
          <el-table-column
            prop=""
            label="操作">
            <template #default="scope">
              <el-button type="primary" size="small" @click="edit(scope.$index)">编辑</el-button>
              <el-button type="danger" size="small" @click="del(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-dialog title="添加成绩" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="姓名">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="班级">
            <el-select v-model="form.class" placeholder="请选择班级">
              <el-option label="高职计算机1班" value="高职计算机1班"></el-option>
              <el-option label="高职计算机2班" value="高职计算机2班"></el-option>
              <el-option label="高职计算机3班" value="高职计算机3班"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数学">
            <el-input v-model="form.mat" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="语文">
            <el-input v-model="form.chn" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="英语">
            <el-input v-model="form.eng" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="clear">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </div>
      </el-dialog>
    </el-container>
  </el-container>
</template>
<script>
import axios from 'axios'
import Top from '@/components/Top'
import Aside from '@/components/Aside'

export default {
  created(){
    this.getData()
  },
  methods: {
    getData(){
      axios.get("http://192.168.0.32:3000/usr").then(res=>{
        this.tableData = res.data;
      })
    },
    clear(){
      this.form = {
        name: "",
        class: "",
        mat: 0,
        chn: 0,
        eng: 0
      }
      this.dialogFormVisible = false
    },
    edit(...args){
      this.dialogFormVisible = true
      if(typeof(args[0]) != "number"){
        console.log(this.editIndex)
      }else{
        this.editIndex = args[0]
        console.log(this.editIndex)
        for(let i in this.tableData[args[0]]){
          this.form[i] = this.tableData[args[0]][i]
        }
      }
    },
    add() {
      this.form.mat = Number(this.form.mat);
      this.form.chn = Number(this.form.chn);
      this.form.eng = Number(this.form.eng);
      if(this.editIndex == -1){
        this.tableData.push(this.form);
      }else{
        axios.put(`http://192.168.0.32:3000/usr/${this.editIndex}`,{
          usr:this.form
        }).then(()=>{
          this.getData()
        }).catch(err=>{
          console.log(err)
        })
      }
      this.clear()
    },
    del(i) {
      this.$confirm('此操作将删除该跳数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(i,1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    aver(i){
      // 加和/length
      let sum = 0;
      for(let j in this.tableData[i]){
        if(typeof(this.tableData[i][j])=="number"){
          sum += this.tableData[i][j]
        }
      }
      let average = sum/(Object.keys(this.tableData[i]).length-2)
      return average.toFixed(2);
    }
  },
  data(){
    return {
      editIndex: -1,
      dialogFormVisible: false,
      form:{
        name: "",
        class: "",
        mat: 0,
        chn: 0,
        eng: 0
      },
      tableData: []
    }
  },
  components:{
    Top,
    Aside
  }
}
</script>
<style scoped>
.el-main>.el-header{
  background-color: #b3c0d1;
}
</style>